<template>
  <view class="container container-white">
    <scroll-view
      class="article-body"
      :scroll-y="true"
    >
      <view class="article van-hairline--bottom">
        <van-skeleton
          title
          title-width="100%"
          :row="2"
          :loading="!loaded"
          class="skeleton-article-header"
        >
          <van-cell
            :title="article.title"
            size="large"
            :border="false"
            class="article-title__cell"
          />
        </van-skeleton>

        <van-skeleton
          title
          title-width="50%"
          :row="1"
          :loading="!loaded"
          class="skeleton-article-channel"
        >
          <van-cell-group v-if="article.from">
            <van-cell
              :border="false"
              :title="article.from.text"
              :label="article.from.time"
              custom-class="channel-cell"
              label-class="channel-cell__label"
              value-class="channel-cell__value"
            >
              <view
                slot="icon"
                v-if="article.from.icon"
                class="channel-cell__avatar"
              >
                <avatar :src="article.from.icon" />
              </view>
            </van-cell>
          </van-cell-group>
        </van-skeleton>
        <!-- 内容详情 -->
        <van-skeleton
          :title="false"
          :row="20"
          :loading="!loaded"
          row-width
          class="skeleton-article-body"
        >
          <div class="richcontent">
            <wxParse
              :content="formatRich"
              @preview="preview"
              @navigate="navigate"
            />
          </div>
        </van-skeleton>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import Avatar from '@/components/block/avatar'
import wxParse from 'mpvue-wxparse'
import { getArticleApi } from '@/api'
export default {
  components: {
    Avatar,
    wxParse
  },
  data () {
    return {
      body: '<div>我是HTML代码</div>',
      id: 1,
      loaded: false,
      article: {
        title: '',
        data: null
      }
    }
  },
  onLoad (option) {
    if (option.id) {
      this.id = option.id
    }
  },
  onShow () {
    this.onLoadView()
  },
  computed: {
    formatRich () {
      if (!this.article.data) {
        return ''
      }
      return this.article.data.body
    }
  },
  // 跳转后页面
  mounted () {
    console.log(this.id)
  },
  methods: {
    preview (src, e) {
      // do something
    },
    navigate (href, e) {
      // do something
    },
    onLoadView () {
      getArticleApi(this.id).then((res) => {
        this.article = res
        this.loaded = true
      })
    }
  }
}
</script>

<style lang="less">
.container {
  .van-cell {
    &-group {
      margin-bottom: 10px;
      background: #fff;
      &__title {
        padding: 20px 15px 10px !important;
      }
    }
  }
  .textarea-cell {
    .van-cell {
      flex-direction: column;
      &__value {
        margin-top: 10px;
      }
    }
    &__input {
      white-space: nowrap;
    }
  }
}

.article-title__cell {
  .van-icon--image {
    width: 34px;
    height: 34px;
  }
}

.article-channel__cell {
  padding-right: 0 !important;
  .van-icon__image {
    border-radius: 100%;
  }
  &__value {
    padding-top: 10px;
    .vip-badge {
      display: inline-flex;
      align-items: center;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 20px 0 0 20px;
      padding: 5px;
      color: #fff;
      .van-icon {
        margin-right: 5px;
      }
    }
  }
}

.channel-cell {
  &__avatar {
    margin-right: 5px;
  }
  &__label {
    font-size: 12px !important;
    margin: 0 !important;
  }
}

.images-upload {
  padding: 10px 15px;
}

.richcontent {
  padding: 10px;
  font-size: 16px;
  .p {
    margin-bottom: 10px;
    color: #333;
  }
}
</style>
